
// 放大镜
class Enlarge {
    // 书写我们的属性
    constructor(option) {
        // 获取元素
        console.log(option);
        this.ele = document.querySelector(option)
        // console.log(ele);
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        this.picture = this.enlarge.firstElementChild
        // 获取尺寸
        // 获取show盒子的尺寸
        this.show_w = this.show.clientWidth
        this.show_h = this.show.clientHeight
        // console.log(this.show_w, this.show_h);
        // 获取mask盒子的尺寸
        this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
        this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
        // console.log(this.mask_w, this.mask_h);
        // 获取enlarge盒子中的图片的尺寸
        this.picture_w = parseInt(window.getComputedStyle(this.picture).width)
        this.picture_h = parseInt(window.getComputedStyle(this.picture).height)
        // console.log(this.picture_w, this.picture_h);

        // 方法调用
        this.setSize()
        this.overOut()
        this.clickChange()
        this.move()
    }


    // 书写我们的方法
    // 计算尺寸
    setSize() {
        console.log('计算尺寸');
        /* 
            计算公式
            mask 宽度                   x
        ---------------  =  ------------------------
            show 宽度           picture(图片) 宽度
        */
        // 计算尺寸
        this.enlarge_w = this.mask_w * this.picture_w / this.show_w
        this.enlarge_h = this.mask_h * this.picture_h / this.show_h
        // console.log(enlarge_w, enlarge_h);
        // 赋值给 enlarge 盒子
        this.enlarge.style.width = this.enlarge_w + 'px'
        this.enlarge.style.height = this.enlarge_h + 'px'
    }
    // 移入移出
    overOut() {
        console.log('移入移出');
        // 给show盒子绑定移入和移出事件
        this.show.addEventListener('mouseover', () => {
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })

        this.show.addEventListener('mouseout', () => {
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'
        })


    }
    // 点击切换
    clickChange() {
        console.log('点击切换');
        // 给list添加点击事件
        this.list.addEventListener('click', e => {
            // 事件对象兼容
            e = e || window.event
            // 目标元素
            let target = e.target || e.srcElement

            for (let i = 0; i < this.list.children.length; i++) {
                // 删除类名
                this.list.children[i].classList.remove('active')
            }
            // 对应的添加上类名
            target.classList.add('active')

            // 切换图片
            // 获取图片的地址
            const showSrc = target.dataset.show
            const bgSrc = target.dataset.bg

            // 显示到对应的位置上
            this.show.firstElementChild.src = showSrc
            this.picture.src = bgSrc

        })

    }
    // 移动联动
    move() {
        console.log('移动联动');
        //给show盒子添加鼠标移动事件
        this.show.addEventListener('mousemove', e => {
            // 事件对象兼容
            e = e || window.event
            // 获取对应的坐标点 使用offset 一组 相对于自己元素的左上角的
            let x = e.offsetX - this.mask_w / 2
            let y = e.offsetY - this.mask_h / 2

            // 限定边界范围
            if (x < 0) x = 0
            if (y < 0) y = 0
            if (x >= this.show_w - this.mask_w) x = this.show_w - this.mask_w
            if (y >= this.show_h - this.mask_h) y = this.show_h - this.mask_h

            // 赋值给元素 mask
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            // 让大图跟随移动
            /* 
                计算移动的比例

                  mask盒子移动的距离          mask盒子的宽度
                ----------------------  =  ---------------------
                   图片移动的距离 (x)         enlarge 盒子的宽度
            */
            const pictureLeft = x * this.enlarge_w / this.mask_w
            const pictureTop = y * this.enlarge_h / this.mask_h
            // console.log(pictureLeft);

            // 赋值给大图
            this.picture.style.left = -pictureLeft + 'px'
            this.picture.style.top = -pictureTop + 'px'

        })

    }
}


$('.logo1-2 > span:first').mouseenter(function () {
    $('.logo2-1').css('display', 'block')
})
for (let i = 0; i < $('.logo2-1 li').length; i++) {
    $('.logo2-1 li').eq(i).mouseenter(function () {
        $('.logo2-1').css('display', 'block')
        $('.logo2').css('display', 'block')
        $('.logo2 ul').eq(i).css('display', 'block')
        $('.logo2 ul').eq(i).css('display', 'flex')

        $('.logo2 ul').eq(i).siblings().css('display', 'none')
    })
}
// 鼠标离开 列表消失
$('.logo2').mouseleave(function () {
    $('.logo2-1').css('display', 'none')
    $('.logo2').css('display', 'none')
})



let top1_2_3 = document.querySelector('.top1-2-3')  //退出登录

top1_2_3.onclick = function () {
    window.sessionStorage.removeItem('username')
    window.sessionStorage.removeItem('rpassword')
    window.sessionStorage.removeItem('password')
    window.sessionStorage.removeItem('free')
    window.location.reload()
}

//搜索引擎
let input1 = document.querySelector('.logo1-3>input')
let ul1 = document.querySelector('.logo1-3-1')
//给inp增加input事件
input1.addEventListener('input', () => {
    // let text1 = ul1.value
    let aa = input1.value
    //添加script标签
    let script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&wd=${aa}&req=2&csor=4&pwd=sun&cb=res&_=1646366030169`
    // document.body.appendChlid(script)
    document.body.appendChild(script)
    script.remove()
})

function res(res1) {
    console.log(res1);
    if (!res1.g) return ul1.style.display = 'none'
    console.log(res1);
    let str = ''
    //遍历数组数据
    res1.g.forEach(item => {
        str += `
       <li>${item.q}</li>
       `
    })
    ul1.innerHTML = str
    ul1.style.display = 'block'
}






// console.log(list);

//手机号登录
let username2 = window.sessionStorage.getItem('username1')
//账号登录
let username1 = window.sessionStorage.getItem('username')

let denglu = document.querySelector('.top1-2 span:nth-of-type(1)')

denglu.innerHTML = username1 || username2

let zhuce = denglu.querySelector('.top1-2 span:nth-of-type(2)')



let arr = []
let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
let arr5 = []
list.resultList.forEach(function (item) {

    arr.push(item.productId)  //id
    arr1.push(item.skuName)   //商品名
    arr2.push(item.promoLabels)  //积分
    arr3.push(item.photoName)   //图片1
    arr4.push(item.photoPath)   //图片2
    arr5.push(item.priceAccurate)   //价格
})


let obj = { ...arr }

let lis = [];
for (var key in obj) {
    var temp = {}
    temp.name = key;
    temp.id = obj[key];
    lis.push(temp)
}

let obj1 = { ...arr1 }

let lis1 = [];
for (var key1 in obj1) {
    var temp1 = {}
    temp1.name1 = key1;
    temp1.skuName1 = obj1[key1];
    lis1.push(temp1)
}

let obj2 = { ...arr2 }

let lis2 = [];
for (var key2 in obj2) {
    var temp2 = {}
    temp2.name2 = key2;
    temp2.promoLabels = obj2[key2];
    lis2.push(temp2)
}



let obj3 = { ...arr3 }

let lis3 = [];
for (var key3 in obj3) {
    var temp3 = {}
    temp3.name3 = key3;
    temp3.photoName = obj3[key3];
    lis3.push(temp3)
}


let obj4 = { ...arr4 }

let lis4 = [];
for (var key4 in obj4) {
    var temp4 = {}
    temp4.name4 = key4;
    temp4.photoPath = obj4[key4];
    lis4.push(temp4)
}

let obj5 = { ...arr5 }

let lis5 = [];
for (var key5 in obj5) {
    var temp5 = {}
    temp5.name5 = key5;
    temp5.priceAccurate = obj5[key5];
    lis5.push(temp5)
}


// 数组拼接
for (let i = 0; i < lis.length; i++) {

    lis[i].skuName = lis1[i].skuName1

    lis[i].promoLabels = lis2[i].promoLabels

    lis[i].photoName = lis3[i].photoName

    lis[i].photoPath = lis4[i].photoPath

    lis[i].priceAccurate = lis5[i].priceAccurate
}


console.log(lis);
// window.location.reload()
let dd = document.querySelector('.d')
let id1 = window.sessionStorage.getItem('id')

console.log(id1);
let quantity1 = document.querySelector('.quantity1')
let cot = quantity1.innerText;
par()
function par() {
    // console.log(id);
    
    //定义一个str
    let str = ``
    //渲染页面
    lis.forEach(function (item) {
        if (id1 == item.id) {
            str += `
    <div class="d">
        <p> <a href="./index.html">首页</a> > <a href="./list.html">手机</a> > HUAWEI nova系列 > ${item.skuName}</p>
    </div>
<div class="p">
    <div class="box" id="box1">

        <!-- 正常显示图片区域 -->
        <div class="show">
            <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" alt="">

            <!-- 遮罩层盒子 -->
            <div class="mask"></div>
        </div>

        <!-- 图片切换列表 -->
        <div class="list">
            <img class="active" src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}"  data-show="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" data-bg="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" alt="">

            <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" data-show="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" data-bg="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" alt="">
        </div>

        <!-- 放大镜的盒子 -->
        <div class="enlarge" style="z-index: 999;">
            <img src="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" data-show="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}" data-bg="https://res.vmallres.com/pimages/${item.photoPath}/428_428_${item.photoName}"alt="">
        </div>
    </div>
    <div class="introduce">
        <p>${item.skuName}</p>
        <p>【现货速发 -${item.skuName}】①双3200万前置Vlog镜头②搭载HarmonyOS 2③100W超级快充，点击参与购买>></p>
        <P class="price">
            <span>价格</span><span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp￥</span><span>${item.priceAccurate}</span>
        </P>
        <P>
            <span style="font-size: 16px;">促销&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span><span style="border: 1px solid red;color: red;padding: 2px;">赠送积分</span><span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp购买即赠商城积分，积分可抵现~</span>
        </P>
        <P>
            <span style="font-size: 16px;">服务说明&nbsp&nbsp&nbsp&nbsp&nbsp</span><span>已满48元包邮,由华为终端提供商品、发货开票及售后服务 &nbsp&nbsp&nbsp <span style="color: aqua;cursor: pointer;">查看详情</span> </span><br>
        </P>
        <p>
            <span style="font-size: 16px;">商品编码&nbsp&nbsp&nbsp&nbsp&nbsp</span><span>${item.id}</span>
        </p>
        <p>
            <span style="font-size: 16px;">选择颜色&nbsp&nbsp&nbsp&nbsp&nbsp</span><span style="border: 1px solid red;color: red;padding: 5px;cursor: pointer;">orange</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="border: 1px solid red;color: red;padding: 5px;cursor: pointer;">orange</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="border: 1px solid red;color: red;padding: 5px;cursor: pointer;">orange</span>
        </p>
        <p>
            <span style="font-size: 16px;">保障服务&nbsp&nbsp&nbsp&nbsp&nbsp</span><span style="font-size: 16px;">华为无忧服务￥299</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span style="font-size: 16px;">延长服务宝服务￥199</span>
        </p>
        <p>
            <span style="font-size: 16px;">已选择商品&nbsp&nbsp&nbsp&nbsp&nbsp</span><span style="color: red;">${item.skuName}</span>
        </p>
        <!-- 加入购物车 -->
        <div class="shopping">
            <div class="d1">
                <div class="quantity1">
                   ${cot}
                </div>
                <div class="quantity2">
                    <button class="quantity2_1">+</button>
                    <button class="quantity2_2">-</button>
                </div>
            </div>
            <div class="d2" >加入购物车</div>
            <div class="d3">立即下单</div>
        </div>
    </div>     
</div>

<div class="d4">
        <div class="d5">
            <span>恭喜你成功将${item.skuName}加入购物车！</span>
            
           <div class="d6">
            
                <div class="d6_1">在逛逛</div>
           
          
                <div class="d6_2">前往购物车</div>
           
           </div>
           
            
        </div>
    </div>
       
        
       `
        }
        
        dd.innerHTML = str
    
    })

   
}
// window.location.reload()
//数量

// +号
let quantity2_1 = document.querySelector('.quantity2_1')
//-号
let quantity2_2 = document.querySelector('.quantity2_2')


console.log(cot);
quantity2_1.onclick = function () {
    cot++
    quantity1.innerText = cot;

}
quantity2_2.onclick = function () {
    cot--
    if (cot < 1) {
        alert('数量不可以少于一个偶')
        cot = 1
    }
    quantity1.innerText = cot;
}
//加入购物车
let d2 = document.querySelector('.d2')
let d6_1 = document.querySelector('.d6_1')
let d6_2 = document.querySelector('.d6_2')

d2.onclick = function () {
    //弹框
    $('.d4').css('display', 'block')
    //id
    window.sessionStorage.setItem('id1', d2.dataset.productid)

    //数量
    window.sessionStorage.setItem('cot', quantity1.innerText)
}


// let d5_2 = document.querySelector('.d5_2')


